// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
@use 'sass:string';

// This file is @imported by many SCSS modules, which means it *must not* contain any actual style
// definitions; it may *only* contain SCSS directives (eg, $variable, @function, and @mixin).

@function make-font-family($fonts) {
    $comma: '';
    $family: '';
    @each $font in $fonts {
        $font: if(
            string.index($font, ' ') == null and string.index($font, '-') != 1,
            $font,
            "'#{$font}'"
        );
        $family: $family + $comma + $font;
        $comma: ',';
    }
    @return unquote($family);
}

// Fonts
$fonts: (
    'Segoe UI Web (West European)',
    'Segoe UI',
    '-apple-system',
    'BlinkMacSystemFont',
    'Roboto',
    'Helvetica Neue',
    'Helvetica',
    'Ubuntu',
    'Arial',
    'sans-serif',
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol'
);
$common-font-family: make-font-family($fonts) !default;
$font-family: $common-font-family !default;
$font-stack: $common-font-family !default;
$toolbar-font-family: $common-font-family !default;
$font-weight-heavy: bold !default;
$font-weight-normal: normal !default;
$font-weight-lighter: 200 !default;
$font-weight-semi-bold: 600 !default;
$grid-font-size: 12px !default;
$toolbar-font-size: 12px !default;
$toolbar-font-semi-light: 500 $toolbar-font-size $toolbar-font-family !default;
$font-size-xs: 10px !default;
$font-size-s: 11px !default;
$font-size: 12px !default;
$font-size-m: 14px !default;
$font-size-ml: 16px !default;
$font-size-l: 18px !default;
$font-size-lml: 21px !default;
$font-size-ll: 24px !default;
$font-size-xl: 36px !default;
$font-size-xxl: 40px !default;
$font-size-xxxl: 56px !default;
$font-size-xxxxl: 72px !default;
$code-font-family:
    menlo,
    consolas,
    courier new,
    monospace !default;

@mixin text-style-title-m {
    font-weight: $font-weight-semi-bold;
    font-size: $font-size-lml;
    line-height: 32px;
    letter-spacing: -0.02em;
}

@mixin text-style-title-l {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 40px;
}

@mixin text-style-title-s {
    font-weight: $font-weight-semi-bold;
    font-size: 17px;
    line-height: 24px;
}

@mixin text-style-header-s {
    font-family: $font-family;
    font-weight: $font-weight-normal;
    font-size: 17px;
    line-height: 24px;
}

@mixin text-style-body-m {
    font-family: $font-family;
    font-weight: $font-weight-normal;
    font-size: $font-size-m;
    line-height: 20px;
}
